<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出框</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/dialog.css">

    <!--darkTheme-->
    <!--<link rel="stylesheet" href="css/skin/skin002.css">-->

</head>
<body>
    <!--遮罩层-->
    <div class="dialogCover pf"></div>
    <!--小弹框-->
    <div class="smallDialog dialog showPopup pf dn">
        <p class="del tar"><a href="javascript:void(0);"><i class="fa fa-close"></i></a></p>
        <div class="content tac">
            <div class="pic error"></div>
            <p class="text">描述描述描述描述描述描述描述描述描述描述</p>
            <div class="btns">
                <a class="dib br5 confirm" href="javascript:void(0);">确认</a>
                <a class="dib br5 border1 cancel" href="javascript:void(0);">取消</a>
            </div>
        </div>
    </div>
    <!--自动隐藏的弹框-->
    <div class="tinyDialog dialog showPopup  pf dn">
        <div class="content tac">
            <div class="pic error"></div>
            <p class="text">描述描述描述描述描述描述描述描述描述描述</p>
        </div>
    </div>
    <!--绑定支付宝账户-->
    <div class="bindDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <h3 class="fl title">绑定支付宝账户</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="main">
                <div class="modelBox clearfix">
                    <div class="txt fl">登录密码</div>
                    <div class="inputBox account fl pr">
                        <input type="text" class="br5 active">
                        <p class="pa warning d n">验证码错误</p>
                    </div>
                </div>
                <div class="modelBox clearfix">
                    <div class="txt fl">支付宝账号</div>
                    <div class="inputBox account fl pr">
                        <input type="text" class="br5 active">
                        <p class="pa warning d n">验证码错误</p>
                    </div>
                </div>
                <div class="modelBox clearfix">
                    <div class="txt fl">短信验证码</div>
                    <div class="inputBox checkCode fl pr">
                        <input type="text" class="br5">
                        <a class="d n" href="javascript:void(0);">获取验证码</a>
                        <span class="info dn">已发送<i class="time">（30s）</i></span>
                        <p class="complete pa"></p>
                        <p class="pa warning d n">验证码错误</p>
                    </div>
                </div>
                <div class="btns tac">
                    <a class="dib br5 transition confirm" href="javascript:void(0);">确认</a>
                    <a class="dib br5 transition cancel" href="javascript:void(0);">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!--修改支付宝账户-->
    <div class="changeDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <h3 class="fl title">修改支付宝账户</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="main">
                <div class="modelBox clearfix">
                    <div class="txt fl">登录密码</div>
                    <div class="inputBox oldAccount fl pr">
                        <input type="text" class="br5 active">
                        <p class="pa warning d n">验证码错误</p>
                    </div>
                </div>
                <div class="modelBox clearfix">
                    <div class="txt fl">新支付宝账号</div>
                    <div class="inputBox newAccount fl">
                        <input type="text" class="br5">
                    </div>
                </div>
                <div class="modelBox clearfix">
                    <div class="txt fl">支付密码</div>
                    <div class="inputBox password fl pr">
                        <input type="text" class="br5 ">
                        <p class="pa warning d n">密码错误</p>
                    </div>
                </div>
                <div class="modelBox clearfix">
                    <div class="txt fl">短信验证码</div>
                    <div class="inputBox checkCode fl pr">
                        <input type="text" class="br5">
                        <a class="dn" href="javascript:void(0);">获取验证码</a>
                        <span class="info dn">已发送<i class="time">（30s）</i></span>
                        <p class="complete pa"></p>
                        <p class="pa warning d n">验证码错误</p>
                    </div>
                </div>
                <div class="btns tac">
                    <a class="dib br5 transition confirm" href="javascript:void(0);">确认</a>
                    <a class="dib br5 transition cancel" href="javascript:void(0);">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!--设置支付密码-->
    <div class="setPwdDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <h3 class="fl title">设置支付密码</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="main">
                <div class="modelBox clearfix">
                    <div class="txt fl">支付密码</div>
                    <div class="inputBox password fl">
                        <input type="text" class="br5 active">
                    </div>
                </div>
                <div class="modelBox clearfix">
                    <div class="txt fl">确认密码</div>
                    <div class="inputBox password fl pr">
                        <input type="text" class="br5 wrong">
                        <p class="pa warning">密码错误</p>
                    </div>
                </div>
                <div class="modelBox clearfix">
                    <div class="txt fl">短信验证码</div>
                    <div class="inputBox checkCode fl pr">
                        <input type="text" class="br5">
                        <a class="dn" href="javascript:void(0);">获取验证码</a>
                        <span class="info dn">已发送<i class="time">（30s）</i></span>
                        <p class="complete pa d n"></p>
                        <p class="pa warning dn">验证码错误</p>
                    </div>
                </div>
                <div class="btns tac">
                    <a class="dib br5 transition confirm" href="javascript:void(0);">确认</a>
                    <a class="dib br5 transition cancel" href="javascript:void(0);">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!--修改支付密码-->
    <div class="changePwdDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <h3 class="fl title">修改支付密码</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="main">
                <div class="modelBox clearfix">
                    <div class="txt fl">原始密码</div>
                    <div class="inputBox oldPwd fl pr">
                        <input type="text" class="br5 wrong">
                        <p class="pa warning">密码错误</p>
                    </div>
                </div>
                <div class="modelBox clearfix">
                    <div class="txt fl">新密码</div>
                    <div class="inputBox password fl">
                        <input type="text" class="br5 active">
                    </div>
                </div>
                <div class="modelBox clearfix">
                    <div class="txt fl">确认新密码</div>
                    <div class="inputBox password fl pr">
                        <input type="text" class="br5 wrong">
                        <p class="pa warning d n">密码不一致</p>
                    </div>
                </div>
                <div class="btns tac">
                    <a class="dib br5 transition confirm" href="javascript:void(0);">确认</a>
                    <a class="dib br5 transition cancel" href="javascript:void(0);">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!--认证手机号-->
    <div class="authenticateDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <h3 class="fl title">认证手机号码</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="main">
                <p class="tellYou tac">解绑后，您无法再使用此手机号进行找回密码及登录相关操作。</p>
                <div class="clearfix">
                    <p class="fl tar">已绑定手机号：</p>
                    <p class="fl tal">176******03</p>
                </div>
                <div class="clearfix">
                    <p class="fl tar">请输入已绑定手机号：</p>
                    <p class="tellInput fl tal pr">
                        <input class="br5" type="tel" placeholder="请输入您的手机号">
                        <span class="warning pa">输入手机号有误</span>
                    </p>
                </div>
                <div class="btns tac">
                    <a class="dib br5 transition cancel" href="javascript:void(0);">取消</a>
                    <a class="dib br5 transition confirm" href="javascript:void(0);">下一步</a>
                </div>
            </div>
        </div>
    </div>
    <!--绑定手机-->
    <div class="bindCellDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <h3 class="fl title">绑定手机</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="main">
                <div class="clearfix">
                    <p class="fl tar">手机号码：</p>
                    <p class="tellInput phoneNum fl tal pr">
                        <input class="br5" type="tel" placeholder="请输入您的手机号">
                        <span class="warning pa">输入手机号有误</span>
                    </p>
                </div>
                <div class="clearfix">
                    <p class="fl tar">短信验证码：</p>
                    <p class="tellInput checkCode fl tal pr">
                        <input class="br5" type="tel" placeholder="请输入验证码">
                        <a class="tac dib br5 transition" href="javascript:void(0);">发送验证码</a>
                        <span class="warning pa">验证码有误</span>
                    </p>
                </div>
                <div class="btns tac">
                    <a class="dib br5 transition confirm" href="javascript:void(0);">确认</a>
                    <a class="dib br5 transition cancel" href="javascript:void(0);">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!--验证身份-->
    <div class="checkIdDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <h3 class="fl title">验证身份</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="main">
                <div class="keyIcon tac">
                    <img src="img/icons/key.png" alt="">
                    <h2>请输入登录密码验证身份</h2>
                    <h2>1397075094@qq.com</h2>
                </div>
                <div class="clearfix">
                    <p class="fl tar">密码：</p>
                    <p class="tellInput password fl tal pr">
                        <input class="br5" type="tel" placeholder="请输入密码">
                        <span class="warning pa">密码有误</span>
                    </p>
                </div>
                <div class="clearfix">
                    <p class="fl tar">验证码：</p>
                    <p class="tellInput checkCode fl tal pr">
                        <input class="br5" type="tel" placeholder="请输入验证码">
                        <span class="warning pa">验证码有误</span>
                    </p>
                    <div class="checkCodeBox fl pr br5">
                        <div class="code">
                            <img src="http://www.shenyecg.com/Common/GetValidateCode???" alt="">
                        </div>
                        <span class="renew pa">
                            <span class="renewIcon db pa"></span>
                        </span>
                    </div>
                </div>
                <div class="btns tac">
                    <a class="dib br5 transition confirm" href="javascript:void(0);">确认</a>
                    <a class="dib br5 transition cancel" href="javascript:void(0);">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!--修改邮箱-->
    <div class="changeMailBox dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <h3 class="fl title">修改邮箱</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="main">
                <div class="clearfix">
                    <p class="fl tar">邮箱地址：</p>
                    <p class="tellInput mailBox fl pr">
                        <input class="br5" type="tel" placeholder="请输入您的邮箱">
                        <span class="warning pa">邮箱格式错误</span>
                    </p>
                </div>
                <div class="btns tac">
                    <a class="dib br5 transition confirm" href="javascript:void(0);">确认</a>
                    <a class="dib br5 transition cancel" href="javascript:void(0);">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!--修改邮箱成功-->
    <div class="completeDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <h3 class="fl title">修改邮箱</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="main">
                <div class="completeIcon tac">
                    <img src="img/icons/resetPwd.png" alt="">
                    <h2>邮箱绑定成功,但尚未验证</h2>
                    <h2>你可以通过<span>460124512@qq.com</span>登录深夜课堂</h2>
                </div>
                <div class="btns tac">
                    <a class="dib br5 transition confirm" href="javascript:void(0);">马上去验证</a>
                    <a class="dib br5 transition cancel" href="javascript:void(0);">暂不验证</a>
                </div>
            </div>
        </div>
    </div>
    <!--修改密码-->
    <div class="resetPwdDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <h3 class="fl title">修改密码</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="main">
                <div class="clearfix">
                    <p class="fl tar">原始密码：</p>
                    <p class="tellInput fl tal pr oldPwd">
                        <input class="br5" type="text" placeholder="输入密码">
                        <span class="warning pa">密码错误</span>
                    </p>
                </div>
                <div class="clearfix">
                    <p class="fl tar">新密码：</p>
                    <p class="tellInput fl tal pr newPwd">
                        <input class="br5" type="text" placeholder="输入密码">
                        <span class="warning pa">xxxx</span>
                    </p>
                </div>
                <div class="clearfix">
                    <p class="fl tar">确认新密码：</p>
                    <p class="tellInput fl tal pr confirmPwd">
                        <input class="br5" type="text" placeholder="再次输入密码">
                        <span class="warning pa">密码不一致</span>
                    </p>
                </div>
                <div class="btns tac">
                    <a class="dib br5 transition confirm" href="javascript:void(0);">保存</a>
                    <a class="dib br5 transition cancel" href="javascript:void(0);">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!--实名认证-->
    <div class="authenticationDialog dialog showPopup pf dn">
        <div class="content pr">
            <div class="titleBox clearfix">
                <h3 class="fl title feb">实名认证</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="passCheck pa"></div>
            <form>
                <div class="address-wrap clearfix">
                    <label class="label-name tal fl feb" for="trueName">真实姓名</label>
                    <div class="address-group tal fl pr">
                        <span class="trueName pa">路人甲</span>
                        <input type="text" id="trueName" class="form-control br5 dn" placeholder="请填写身份证上的真实姓名">
                        <p class="error-tip dn">请填写身份证上的真实姓名</p>
                    </div>
                </div>
                <div class="address-wrap clearfix">
                    <label class="label-name tal fl feb" for="IDcode">身份证号码</label>
                    <div class="address-group tal fl pr">
                        <span class="IDcardCode pa">12345678987654321</span>
                        <input type="text" id="IDcode" class="form-control br5 dn" placeholder="您的身份证号（将加密处理）">
                        <p class="error-tip dn">请填写身份证号码</p>
                    </div>
                </div>
                <div class="uploadPic">
                    <h3 class="title">
                        <span class="feb">身份证照片</span>
                        <span class="tips">提示：文件大小不超过4MB，格式为jpg、png、jpeg</span>
                    </h3>
                    <div class="upload tac br5 pr num1" style="background-image:url('http://img.shenyecg.com/UploadImages/2017/11/23/2017112318171250600.jpeg')">
                        <span class="uploadBtn br50 transition tac pr">+
                            <input type="file" class="pa">
                        </span>
                        <span class="completeIcon pa"></span>
                    </div>
                    <div class="upload tac br5 pr num2" style="background-image:url('http://img.shenyecg.com/UploadImages/2017/11/23/2017112318171250600.jpeg')">
                        <span class="uploadBtn br50 transition tac pr">+
                            <input type="file" class="pa">
                        </span>
                        <span class="completeIcon pa"></span>
                    </div>
                    <div class="upload tac br5 pr num3">
                        <span class="uploadBtn br50 transition tac pr">+
                            <input type="file" class="pa">
                        </span>
                        <span class="completeIcon pa"></span>
                    </div>
                    <div class="tipText tac">
                        <p class="dib">上传身份证正面照片</p>
                        <p class="dib">上传身份证反面照片</p>
                        <p class="dib">上传手持身份证照片</p>
                    </div>
                    <p class="infoMsg">哈哈哈哈哈哈哈</p>
                    <a class="tac db br5 transition submit" href="javascript:void(0)">提交审核</a>
                </div>
            </form>
        </div>
    </div>
    <!--个人信息 && 更换头像 更改昵称 更改描述-->
    <div class="changePicDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <h3 class="fl title feb">个人信息</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="userPicChange">
                <div class="recommendPic tac br50 pr">
                    <img class="br50" src="http://img.shenyecg.com/UploadImages/HeadShow/30.jpg" alt="">
                    <div class="loading br50 pa">
                        <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                    </div>
                </div>
                <div class="changesBtn tac">
                    <a class="exchange" href="javascript:void(0);">换一换</a>
                    <a class="uploadPic pr" href="javascript:void(0);">
                        上传头像
                        <input type="file" class="pa">
                    </a>
                </div>
                <div class="inputBox name clearfix disable">
                    <div class="fl txt">昵称</div>
                    <div class="fl nickName">
                        <input type="text" disabled placeholder="请输入个人昵称">
                    </div>
                </div>
                <div class="inputBox theme clearfix disable">
                    <div class="fl txt">主题内容</div>
                    <div class="fl describe">
                        <textarea class="br5" disabled placeholder="关于您的内容定位描述"></textarea>
                    </div>
                </div>
                <div class="btns tac">
                    <a class="confirm dib br5 transition" href="javascript:void(0);">确认</a>
                    <a class="cancel dib br5 transition" href="javascript:void(0);">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!--编辑关于我的个人介绍-->
    <div class="aboutMeDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <h3 class="fl title feb">编辑个人介绍</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="editMsg">
                <div class="inputBox theme clearfix">
                    <div class="fl txt">关于我</div>
                    <div class="fl describe">
                        <textarea class="br5" placeholder="关于您描述"></textarea>
                    </div>
                </div>
                <div class="btns tac">
                    <a class="confirm dib br5 transition" href="javascript:void(0);">确认</a>
                    <a class="cancel dib br5 transition" href="javascript:void(0);">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!--发布完成-->
    <div class="postFinishedDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="infos tac">
                <div class="icons"></div>
                <p class="tip">
                    <span class="dib">发布成功</span>
                    <a class="dib br5 transition check" href="javascript:void(0);">查看</a>
                </p>
            </div>
            <div class="shares tac">
                <div class="shareWays">
                    <div class="bdsharebuttonbox share-ways-button" data-tag="share_1">
                        <a class="br50 bds_tsina" data-cmd="tsina"></a>
                        <a class="br50 bds_weixin" data-cmd="weixin"></a>
                        <a class="br50 bds_sqq" data-cmd="sqq"></a>
                        <a class="br50 bds_qzone" data-cmd="qzone"  style="margin-right:0;"></a>
                    </div>
                </div>
                <p class="tip">分享到社交网络可获得更多关注者</p>
            </div>
        </div>
    </div>
    <!--创建新的订阅项目-->
    <div class="newRewardDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox tac clearfix">
                <h3 class="dib title feb">新的创建</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="newReward br5">
                <div class="writeBox">
                    <div class="price clearfix">
                        <div class="fl text">价格</div>
                        <div class="fl right">
                            ￥<input type="text">
                        </div>
                    </div>
                    <div class="payWays clearfix">
                        <div class="fl text">付费方式</div>
                        <div class="fl right">
                            <label><input type="radio" name="pay" checked>每月付费</label>
                            <label><input type="radio" name="pay">一口价</label>
                        </div>
                    </div>
                    <div class="packYear clearfix">
                        <div class="fl text">开通包年</div>
                        <div class="fl right">
                            <label><input type="checkbox">开通</label>
                            <div class="fold">
                                <p class="threeMonth">三个月<span class="rmb">0</span>元<span class="discount">9.5折</span></p>
                                <p class="halfYear">六个月<span class="rmb">0</span>元<span class="discount">9折</span></p>
                                <p class="aYear">一年<span class="rmb">0</span>元<span class="discount">8.5折</span></p>
                            </div>
                        </div>
                    </div>
                    <div class="name clearfix">
                        <div class="fl text">名称</div>
                        <div class="fl">
                            <input type="text" placeholder="(如：苹果)">
                        </div>
                    </div>
                    <div class="picture clearfix">
                        <div class="fl text">图片</div>
                        <div class="fl upload">
                            <div class="addPic tac pr">
                                <a href="javascript:void(0);" class="pa tac renew">
                                    更换
                                    <input type="file" class="pa">
                                </a>
                                <a href="javascript:void(0);" class="del pa tac">
                                    <i class="fa fa-trash"></i>
                                </a>
                                <a class="db pr btn" href="javascript:void(0);">
                                    <div class="icon"></div>
                                    <p class="text">添加一张主页封面（1900*550）</p>
                                    <input type="file" class="pa">
                                </a>
                                <div class="picture pa d n" style="background-image:url('https://wx4.sinaimg.cn/large/006Tr4asgy1fp1x95yk9nj30fr08vteu.jpg')"></div>
                            </div>
                        </div>
                    </div>
                    <div class="describe clearfix">
                        <div class="fl text">描述</div>
                        <div class="fl">
                            <textarea class="br5 border1" placeholder="(当有100个人支持我时，我将会每天花一半的时间投入在高级CG模型内容创作)"></textarea>
                        </div>
                    </div>
                    <div class="introPlace clearfix">
                        <div class="fl text">介绍地址</div>
                        <div class="fl">
                            <textarea class="br5 border1"></textarea>
                        </div>
                    </div>
                    <div class="populationLimit clearfix">
                        <div class="fl text">人数限制</div>
                        <div class="fl right">
                            <label><input type="checkbox">开通</label>
                            <div class="population dib">最多<input type="text">人购买</div>
                        </div>
                    </div>
                    <div class="chargeTime clearfix">
                        <div class="fl text">收费日期</div>
                        <div class="fl right">
                            <label><input type="checkbox">开通</label>
                            <div class="dib box">
                                <span>将在</span>
                                <div class="calendar dib pr clearfix" id="calen dar">
                                    <p class="timeChoosed fl" contenteditable="false">2018-4-12</p>
                                    <a href="javascript:void(0);" class="calendarIcon db fl"><i class="fa fa-calendar"></i></a>
                                </div>
                                <span>正式开始计算</span>
                            </div>
                        </div>
                    </div>
                    <div class="btns">
                        <a class="tac dib br5 transition border1 save" href="javascript:void(0);">保存信息</a>
                        <a class="tac dib br5 transition border1 cancel" href="javascript:void(0);">取消</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--优惠券立即使用 -- 选择作者 -->
    <div class="couponUseDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox tac clearfix">
                <h3 class="dib title feb">选择作者</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="searchBox clearfix">
                <div class="fl word">作者：</div>
                <div class="fl searchInput pr br5">
                    <input type="text">
                    <a class="pa searchBtn" href="javascript:void(0)"><i class="fa fa-search"></i></a>
                </div>
            </div>
            <div class="userList border1 br5">
                <div class="tab">
                    <p class="dib number">序号</p>
                    <p class="dib nickName">作者名称</p>
                    <p class="dib control">操作</p>
                </div>
                <div class="user">
                    <p class="dib number">1</p>
                    <p class="dib nickName">路人甲</p>
                    <p class="dib control"><input type="radio" name="onlyOne"></p>
                </div>
                <div class="user">
                    <p class="dib number">2</p>
                    <p class="dib nickName">路人乙</p>
                    <p class="dib control"><input type="radio" name="onlyOne"></p>
                </div>
                <div class="user">
                    <p class="dib number">3</p>
                    <p class="dib nickName">路人丙</p>
                    <p class="dib control"><input type="radio" name="onlyOne"></p>
                </div>
                <div class="user">
                    <p class="dib number">4</p>
                    <p class="dib nickName">路人丁</p>
                    <p class="dib control"><input type="radio" name="onlyOne"></p>
                </div>
                <div class="user">
                    <p class="dib number">5</p>
                    <p class="dib nickName">路人戊</p>
                    <p class="dib control"><input type="radio" name="onlyOne"></p>
                </div>
                <div class="user">
                    <p class="dib number">6</p>
                    <p class="dib nickName">路人己</p>
                    <p class="dib control"><input type="radio" name="onlyOne"></p>
                </div>
                <div class="user">
                    <p class="dib number">7</p>
                    <p class="dib nickName">路人庚</p>
                    <p class="dib control"><input type="radio" name="onlyOne"></p>
                </div>
                <div class="user">
                    <p class="dib number">8</p>
                    <p class="dib nickName">路人辛</p>
                    <p class="dib control"><input type="radio" name="onlyOne"></p>
                </div>
                <div class="user">
                    <p class="dib number">9</p>
                    <p class="dib nickName">路人壬</p>
                    <p class="dib control"><input type="radio" name="onlyOne"></p>
                </div>
                <div class="user">
                    <p class="dib number">10</p>
                    <p class="dib nickName">路人癸</p>
                    <p class="dib control"><input type="radio" name="onlyOne"></p>
                </div>
            </div>
            <div class="page tac">
                <ul class="pageList pr clearfix">
                    <li class="text disable"><a href="javascript:void(0);">首页</a></li>
                    <li class="text disable"><a href="javascript:void(0);">上一页</a></li>
                    <li class="pageActive"><a href="javascript:void(0);">1</a></li>
                    <li><a href="javascript:void(0);">2</a></li>
                    <li><a href="javascript:void(0);">3</a></li>
                    <li><a href="javascript:void(0);">...</a></li>
                    <li class="text"><a href="javascript:void(0);">下一页</a></li>
                    <li class="text"><a href="javascript:void(0);">尾页</a></li>
                </ul>
            </div>
            <a class="nextStep br5 transition db tac" href="javascript:void(0);">下一步</a>
        </div>
    </div>
    <!--发私信-->
    <div class="sendLetterDialog dialog showPopup pf dn">
        <div class="content clearfix">
            <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            <p class="sendTo">给<span class="nickName">路人甲</span>发私信：</p>
            <textarea class="inputField br5"></textarea>
            <div class="bottom clearfix">
                <p class="tips fl">还可以输入<span class="num">200</span>个字</p>
                <div class="btns fr tac">
                    <a class="dib transition br5 sendBtn" href="javascript:void(0);">发送</a>
                    <a class="dib transition br5 cancelBtn" href="javascript:void(0);">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!--删除收藏夹内容-->
    <div class="delCollectDialog dialog showPopup pf dn">
        <div class="content tac">
            <div class="icon"></div>
            <p class="tips">你确定删除“<span>现阶段教程</span>”吗？</p>
            <div class="btns clearfix">
                <a class="confirmBtn db fl" href="javascript:void(0);">确认</a>
                <a class="cancelBtn db fl" href="javascript:void(0);">取消</a>
            </div>
        </div>
    </div>
    <!--收藏-->
    <div class="collectDialog dialog showPopup pf dn">
        <div class="content tac">
            <div class="titleBox clearfix">
                <h3 class="fl title feb">收藏</h3>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="collectList">
                <div class="item private clearfix">
                    <p class="fileName fl"><span>我喜欢的作品</span><i class="fa fa-lock"></i></p>
                    <a class="collectBtn fr br5 transition" href="javascript:void(0);">收藏</a>
                </div>
                <div class="item clearfix">
                    <p class="fileName fl"><span>LOGO</span><i class="fa fa-lock"></i></p>
                    <a class="collectBtn fr br5 transition" href="javascript:void(0);">收藏</a>
                </div>
                <div class="item clearfix">
                    <p class="fileName fl"><span>designer</span><i class="fa fa-lock"></i></p>
                    <a class="collectBtn fr br5 transition" href="javascript:void(0);">收藏</a>
                </div>
                <div class="item private clearfix">
                    <p class="fileName fl"><span>字体设计</span><i class="fa fa-lock"></i></p>
                    <a class="collectBtn active fr br5 transition" href="javascript:void(0);">已收藏</a>
                </div>
                <div class="item clearfix">
                    <p class="fileName fl"><span>我喜欢的作品</span><i class="fa fa-lock"></i></p>
                    <a class="collectBtn fr br5 transition" href="javascript:void(0);">收藏</a>
                </div>
                <div class="item clearfix">
                    <p class="fileName fl"><span>我喜欢的作品</span><i class="fa fa-lock"></i></p>
                    <a class="collectBtn fr br5 transition" href="javascript:void(0);">收藏</a>
                </div>
            </div>
            <a class="createCollectBtn db" href="javascript:void(0);"><i class="br50">+</i>创建收藏夹</a>
        </div>
    </div>
    <!--创建收藏夹-->
    <div class="buildCollectDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <div class="title tac fl">
                    <h3>创建收藏夹</h3>
                    <p class="tip">（以更简单的方法收集、分享及管理照片作品等素材）</p>
                </div>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="editBox">
                <div class="collectName pr border1 br5">
                    <div class="wordsLimit warning pa"><span>60</span>/50</div>
                    <input type="text" placeholder="收藏夹名称" onfocus="this.placeholder=''" onblur="this.placeholder='收藏夹名称'">
                </div>
                <div class="classify">
                    <span>请选择收藏夹类型：</span>
                    <label>图片<input type="radio" name="classify" checked></label>
                    <label>帖子<input type="radio" name="classify"></label>
                </div>
                <div class="description pr br5 border1">
                    <div class="wordsLimit warning pa"><span>350</span>/300</div>
                    <textarea placeholder="说明" onfocus="this.placeholder=''" onblur="this.placeholder='说明'"></textarea>
                </div>
                <div class="permission">
                    <label>公开<input type="radio" name="permission" checked></label>
                    <label>私密<input type="radio" name="permission"></label>
                    <span>（仅自己可见）</span>
                </div>
                <div class="btns tac">
                    <a class="confirmBtn transition br5 dib" href="javascript:void(0);">确认</a>
                    <a class="cancelBtn transition br5 dib" href="javascript:void(0);">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!--编辑收藏夹-->
    <div class="editCollectDialog dialog showPopup pf dn">
        <div class="content">
            <div class="titleBox clearfix">
                <div class="title tac fl">
                    <h3>编辑收藏夹</h3>
                </div>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="editBox">
                <div class="collectName pr border1 br5">
                    <div class="wordsLimit warning pa"><span>60</span>/50</div>
                    <input type="text" placeholder="收藏夹名称" onfocus="this.placeholder=''" onblur="this.placeholder='收藏夹名称'">
                </div>
                <div class="classify">
                    <span>请选择收藏夹类型：</span>
                    <label>图片<input type="radio" name="classify" checked></label>
                    <label>帖子<input type="radio" name="classify"></label>
                </div>
                <div class="description pr br5 border1">
                    <div class="wordsLimit warning pa"><span>350</span>/300</div>
                    <textarea placeholder="说明" onfocus="this.placeholder=''" onblur="this.placeholder='说明'"></textarea>
                </div>
                <div class="permission">
                    <label>公开<input type="radio" name="permission" checked></label>
                    <label>私密<input type="radio" name="permission"></label>
                    <span>（仅自己可见）</span>
                </div>
                <div class="collectCover">
                    <p>封面：</p>
                    <div class="cover br5 pr">
                        <div class="coverPic" style="background-image:url('http://img.yxs.shenyecg.com/Image/7lAOvgftYM8yYLQuEZI7IxzEQ4iHOUBD/B2DMMdAj4Q.jpg')"></div>
                        <a class="renewBtn pa" href="javascript:void(0);">重新上传<input type="file" class="pa"></a>
                    </div>
                    <span class="tips">尺寸不超过：232*142</span>
                </div>
                <div class="btns tac">
                    <a class="confirmBtn transition br5 dib" href="javascript:void(0);">确认</a>
                    <a class="cancelBtn transition br5 dib" href="javascript:void(0);">取消</a>
                </div>
            </div>
        </div>
    </div>
    <!--裁切上传封面-->
    <div class="cutCoverDialog dialog showPopup pf d n">
        <div class="content">
            <div class="titleBox clearfix">
                <div class="title fl">
                    <h3>上传封面</h3>
                </div>
                <a class="fr del" href="javascript:void(0);"><i class="fa fa-close"></i></a>
            </div>
            <div class="cutBox">
                <p class="tip">当前裁剪尺寸：1239*929，建议尺寸239*247或以上</p>
                <div class="mainCutContent clearfix spread">
                    <div class="cutPicBox tac fl">
                        <div class="imgCut br5">
                            <!--未上传-->
                            <a href="javascript:void(0);" class="uploadBox db pr">
                                <span class="icon db"><i class="db"></i></span>
                                <p class="tip">添加图片</p>
                                <p class="txt">仅支持JPG、PNG、GIF，大小不能超过5M</p>
                                <p class="txt">建议尺寸为239*247</p>
                                <input type="file" class="pa">
                            </a>
                            <!--已上传-->
                            <div class="uploadedBox">

                            </div>
                        </div>
                        <div class="tip">注：上传优质的封面图片，更容易让你的作品赢得掌声哦~</div>
                        <div class="imgControl clearfix">
                            <a class="reUpload pr fl" href="javascript:void(0);">
                                重新上传
                                <input type="file" class="pa">
                            </a>
                            <div class="controlBtns fr">
                                <span class="resetBtn dib"></span>
                                <span class="zoomInBtn dib"></span>
                                <span class="zoomOutBtn dib"></span>
                                <span class="rotateBtn dib"></span>
                            </div>
                        </div>
                    </div>
                    <div class="finalPicBox singlePic fr">
                        <div class="showPic br5 border1">
                            <div class="finalPic" style="background-image:url('http://img.yxs.shenyecg.com/Image/IkPJcmkcv5XtohQmKH9w4nWNsAElxYrD/cF5Da2T2pW.jpg')">
                                <img src="" alt="">
                            </div>
                            <div class="picMsg dn">
                                <h3 class="title toe">标题的名字</h3>
                                <p class="classify">发布的分类</p>
                                <div class="datas">
                                    <p class="scan dib">
                                        <span class="icon"></span>
                                        <span class="num">10</span>
                                    </p>
                                    <p class="comment dib">
                                        <span class="icon"></span>
                                        <span class="num">10</span>
                                    </p>
                                    <p class="thumbUp dib">
                                        <span class="icon"></span>
                                        <span class="num">10</span>
                                    </p>
                                </div>
                            </div>
                            <div class="picWorker clearfix dn">
                                <div class="worker fl">
                                    <div class="avatar dib br50">
                                        <img src="https://q.qlogo.cn/g?b=qq&nk=1690355023&s=100" alt="">
                                    </div>
                                    <p class="nickName toe dib">这是个昵称</p>
                                </div>
                                <span class="tip fr">未发布</span>
                            </div>
                        </div>
                        <p class="txt">预览效果</p>
                    </div>
                </div>
            </div>
            <div class="btns tac">
                <a class="confirmBtn transition dib br5" href="javascript:void(0);">确定</a>
                <a class="cancelBtn transition dib br5" href="javascript:void(0);">取消</a>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        //选择作者
        $(".couponUseDialog .searchBox input").focus(function () {
            $(this).parent().addClass("active")
        });
        $(".couponUseDialog .searchBox input").blur(function () {
            $(this).parent().removeClass("active")
        });
    })
</script>
<script>
    window._bd_share_config = {
        common : {
            bdText : '自定义分享内容',
            bdDesc : '自定义分享摘要',
            bdUrl : '自定义分享url地址',
            bdPic : '自定义分享图片'
        },
        share : [{
            "bdSize" : 32
        }]
    };
    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>
</html>
